<template>
  <div class="shouye">
    <!-- <div class="Header">
      <h3>建德市投资项目全流程智能管理系统</h3>
      <div class="Header-right">
        <div class="imageOne">
          <img src="./../../public/shouyeImage/管理.png" alt="" />
        </div>
        <div class="ImageTwo">
          <img src="./../../public/shouyeImage/头像.png" alt="" />
          <p>admin</p>
          <img src="./../../public/shouyeImage/展开icon.png" alt="" />
        </div>
      </div>
    </div> -->
    <Head @judge="judge1"></Head>
    <div class="Section">
      <div>
        <div class="NavBar">
          <TabBar msg="/shouye"></TabBar>
        </div>
        <div class="Section-right">
          <div class="Section-rightTop">
            <div class="divNavbar">
              <mt-navbar v-model="selected" class="mt-navbar">
                <mt-tab-item id="1" class="mt-tab-item">已报项目</mt-tab-item>
                <mt-tab-item id="2" class="mt-tab-item">退回项目</mt-tab-item>
              </mt-navbar>
            </div>
            <div class="from">
              <div class="Input">
                <input type="text" placeholder="综合查询" />
                <span class="el-icon-search"></span>
              </div>
              <div class="Button">
                <el-button
                  style="
                    height: 25px;
                    font-size: 12px;
                    box-sizing: border-box;
                    padding-bottom: 10px;
                    background-color: rgb(129, 191, 232);
                    border: 0;
                  "
                  type="primary"
                  icon="el-icon-plus"
                  size="mini"
                  round
                  >新增</el-button
                >
                <el-button
                  type="primary"
                  icon="el-icon-edit-outline"
                  size="mini"
                  round
                  style="
                    height: 25px;
                    font-size: 12px;
                    box-sizing: border-box;
                    padding-bottom: 10px;
                    background-color: rgb(129, 191, 232);
                    border: 0;
                  "
                  >导出</el-button
                >
              </div>
            </div>
          </div>
          <div class="Section-rightBottom">
            <mt-tab-container class="mt-tab-container" v-model="selected">
              <mt-tab-container-item class="mt-tab-container-item" id="1">
                <div class="ButtonTwo">
                  <p>筛选：</p>
                  <el-button
                    type="primary"
                    size="mini"
                    class="ButtonClick"
                    round
                    >五年规划项目</el-button
                  >
                  <el-button
                    type="success"
                    size="mini"
                    class="ButtonClick"
                    round
                    >政府投资项目(50万以上)</el-button
                  >
                  <el-button type="info" size="mini" class="ButtonClick" round
                    >政府投资项目(50万以下)</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    class="ButtonClick"
                    round
                    >企业投资项目</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    class="ButtonClick"
                    round
                    >信息化项目</el-button
                  >
                </div>
                <div class="Section-rightBottom-Table">
                  <table border="1" style="width: 100%">
                    <tr>
                      <th>项目名称</th>
                      <th>项目年度</th>
                      <th>项目类别</th>
                      <th>建设地址</th>
                      <th>填报单位</th>
                      <th>申报时间</th>
                      <th>状态</th>
                      <th>详细信息</th>
                    </tr>
                    <tr v-for="(item, index) in tabList" :key="index">
                      <td>{{ item.title1 }}</td>
                      <td>{{ item.title2 }}</td>
                      <td>{{ item.title3 }}</td>
                      <td>{{ item.title4 }}</td>
                      <td>{{ item.title5 }}</td>
                      <td>{{ item.title6 }}</td>
                      <td>
                        <div class="zhuangtai">
                          <el-button size="mini" type="danger">{{
                            item.title7
                          }}</el-button>
                          <el-button size="mini" type="primary">{{
                            item.title8
                          }}</el-button>
                          <el-button size="mini" type="info">{{
                            item.title9
                          }}</el-button>
                        </div>
                      </td>
                      <td>
                        <div class="zhuangtai">
                          <el-button type="primary" size="mini">{{
                            item.title10
                          }}</el-button>
                        </div>
                      </td>
                    </tr>
                  </table>
                  <div class="Pagination">
                    <el-pagination
                      background
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page.sync="currentPage3"
                      :page-size="100"
                      layout="total,prev, pager, next, jumper"
                      :total="10"
                    >
                    </el-pagination>
                  </div>
                </div>
              </mt-tab-container-item>
              <mt-tab-container-item class="mt-tab-container-item" id="2">
                <div class="Section-rightBottom-Table">
                  <table border="1" style="width: 100%">
                    <tr>
                      <th>项目名称</th>
                      <th>项目年度</th>
                      <th>项目类别</th>
                      <th>建设地址</th>
                      <th>填报单位</th>
                      <th>申报时间</th>
                      <th>状态</th>
                      <th>详细信息</th>
                    </tr>
                    <tr v-for="(item, index) in tabList2" :key="index">
                      <td>{{ item.title1 }}</td>
                      <td>{{ item.title2 }}</td>
                      <td>{{ item.title3 }}</td>
                      <td>{{ item.title4 }}</td>
                      <td>{{ item.title5 }}</td>
                      <td>{{ item.title6 }}</td>
                      <td>
                        <div class="zhuangtai">
                          <el-button size="mini" type="danger">{{
                            item.title7
                          }}</el-button>
                          <el-button size="mini" type="primary">{{
                            item.title8
                          }}</el-button>
                          <el-button size="mini" type="info">{{
                            item.title9
                          }}</el-button>
                        </div>
                      </td>
                      <td>
                        <div class="zhuangtai">
                          <el-button type="primary" size="mini">查看</el-button>
                        </div>
                      </td>
                    </tr>
                  </table>
                  <div class="Pagination">
                    <el-pagination
                      background
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page.sync="currentPage3"
                      :page-size="100"
                      layout="total,prev, pager, next, jumper"
                      :total="1000"
                    >
                    </el-pagination>
                  </div>
                </div>
              </mt-tab-container-item>
            </mt-tab-container>
          </div>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import Vue from "vue";
import TabBar from "../components/TabBar";
import Head from "../components/head";
import { Navbar, TabItem } from "mint-ui";
import { getlist } from "../api/index";

Vue.component(Navbar.name, Navbar);
Vue.component(TabItem.name, TabItem);
export default {
  name: "Shouye",
  components: {
    TabBar,
    Head,
  },
  data() {
    return {
      judge2: 0,
      selected: "1",
      tabList: [
        {
          title1: "3213",
          title2: "321",
          title3: "323",
          title4: "",
          title5: "",
          title6: "",
          title7: "737",
          title8: "4565",
          title9: "1321321",
          title10: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
      ],
      tabList2: [
        {
          title1: "3213",
          title2: "321",
          title3: "323",
          title4: "",
          title5: "",
          title6: "",
          title7: "737",
          title8: "4565",
          title9: "1321321",
          title10: "查看",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
        {
          title1: "",
          title2: "",
          title3: "",
          title4: "",
          title5: "",
          title6: "",
          title7: "",
          title8: "",
        },
      ],
    };
  },
  created() {
    this.demo();
    // this.judge1()
  },
  methods: {
    demo() {
      console.log(333);
      getlist().then((res) => {
        console.log(res);
      });
    },
    judge1(data) {
      console.log(this.judge2);
      this.judge2 = data;
      console.log("--------------------");
      console.log(this.judge2);
      console.log("--------------------");
    },
  },
};
</script>
<style lang="less" scoped>
.shouye {
  width: 100%;
  height: 100%;
  background-image: url("./../..//public/shouyeImage/背景.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 0 15px 50px 15px;
  .Header {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    h3 {
      color: white;
      line-height: 70px;
    }
    .Header-right {
      display: flex;
      align-items: center;
      width: 7%;
      .imageOne {
        width: 35px;
        height: 35px;
        background-color: rgb(92, 169, 211);
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 25px;
          height: 20px;
        }
      }
      .ImageTwo {
        width: 70%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 5px;
        line-height: 70px;
        p {
          font-size: 12px;
          margin: 0 7px 0px 7px;
          color: white;
        }
        img:nth-child(1) {
          width: 24px;
          height: 24px;
        }
        img:nth-child(3) {
          width: 7px;
          height: 4px;
        }
      }
    }
  }
  .Section {
    width: 100%;
    height: 80%;
    display: flex;
    justify-content: space-between;
    .NavBar {
      width: 5.5%;
      height: 90%;
      box-sizing: border-box;
      padding-top: 5px;
    }
    .Section-right {
      width: 93.5%;
      height: 100%;
      background-color: rgb(252, 247, 247);
      box-sizing: border-box;
      padding: 5px;
      border-radius: 10px;
      .Section-rightTop {
        width: 100%;
        height: 40px;
        background-color: rgb(148, 201, 216);
        border-radius: 10px 10px 0 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0px 10px 0px 10px;
        .divNavbar {
          width: 20%;
          height: 100%;
          .mt-navbar {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            .mt-tab-item {
              width: 50%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              color: white;
              font-size: 14px;
              line-height: 40px;
            }
          }
        }
        .from {
          display: flex;
          align-items: center;
          .Input {
            width: 230px;
            height: 25px;
            background-color: white;
            border-radius: 13px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            input {
              width: 87%;
              height: 100%;
              border: none;
              border-radius: 13px;
              box-sizing: border-box;
              padding-left: 10px;
              text-align: center;
              outline: none;
            }
            span {
              margin-top: 8px;
            }
          }
          .Button {
            margin-left: 20px;
            line-height: 37px;
          }
        }
      }
      .Section-rightBottom {
        width: 100%;
        height: 93%;

        .mt-tab-container {
          width: 100%;
          height: 100%;
          .mt-tab-container-item {
            width: 100%;
            height: 100%;
            .ButtonTwo {
              display: flex;
              align-items: center;
              width: 100%;
              height: 35px;
              font-size: 12px;
              box-sizing: border-box;
              padding-left: 10px;
              border-bottom: 1px solid black;
              p {
                font-size: 12px;
                line-height: 35px;
              }
              .ButtonClick {
                height: 20px;
                font-size: 10px;
                -webkit-transform-origin-x: 0;
                -webkit-transform: scale(0.9);
                line-height: 6px;
                background-color: rgb(148, 201, 216);
                border: none;
                margin: 0;
              }
            }
            .Section-rightBottom-Table {
              width: 100%;
              height: 600px;
              table {
                width: 100%;
                height: 90%;
                background-color: white;
                border-collapse: collapse;
                border: 1px solid rgb(199, 198, 198);
                border-top: none;
                tr {
                  width: 100%;
                  border-bottom: 1px dashed black;
                  font-size: 12px;
                  height: 28px;
                  th {
                    border: none;
                    color: rgb(139, 139, 139);
                    font-weight: 300;
                    height: 30px;
                  }
                  td {
                    border: none;
                    text-align: center;
                    height: 30px;
                    .zhuangtai {
                      .el-button {
                        height: 15px;
                        font-size: 10px;
                        -webkit-transform-origin-x: 0;
                        -webkit-transform: scale(0.9);
                        padding: 0.5px 2px 0px 2px;
                        margin: 0;
                      }
                    }
                  }
                }
                tr:last-child {
                  border-bottom: none;
                }
              }
              .Pagination {
                width: 100%;
                height: 30px;
                text-align: center;
                margin-top: 10px;
              }
            }
          }
        }
      }
    }
  }
}
.mint-navbar .mint-tab-item.is-selected {
  background-color: rgb(205, 133, 17) !important;
}
/deep/.el-pagination .btn-next .el-icon,
.el-pagination .btn-prev .el-icon {
  display: inline;
}
// /deep/.el-pagination .btn-next .el-icon, .el-pagination .btn-prev .el-icon .el-icon-arrow-right{
//   line-height: 30px;
// }
// /deep/.el-pagination .btn-next .el-icon, .el-pagination .btn-prev .el-icon{
//   display: inline;
// }
/deep/ .btn-prev .el-pagination .btn-next .el-icon,
.el-pagination .btn-prev .el-icon {
  display: inline;
}
</style>
